<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="icon" href="img/icon-mogujie.png" type="image/x-icon">
    <meta name="keywords" content="买衣服，先逛蘑菇街">
    <meta name="description"
          content="蘑菇街，是中国领先的时尚目的地。公司通过形式多样的时尚内容，种类丰富的时尚商品，以及结合红人直播、买手选款+智能推荐的售卖方式，让人们在分享和发现流行趋势的同时，尽情享受优质的购物体验。2011年，蘑菇街正式上线，2016年1月与美丽说战略融合，公司旗下包括：蘑菇街、美丽说、uni等产品与服务。">
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/public2.css"/>
    <!--<link rel="stylesheet" type="text/css" href="css/login.css"/>-->
    <link rel="stylesheet" type="text/css" href="css/index2.css"/>


</head>
<body style="background: #F5F5F5;">
<header id="login_header">
    <div class="wrap_hea">
        <div class="logo">
            <a href="javascript:;"></a>
        </div>
        <div class="message">
            依《网络安全法》相关要求，即日起蘑菇街会员登陆需绑定手机。为保障您的账户安全及正常使用，如您尚未绑定，请尽快完成绑定，感谢您的理解和支持!
        </div>
    </div>
</header>
<section id="main_logo">

    <div class="wrap"  >
        <div class="box_none"></div>
        <div class="content" >
            <div class="saoyisao clear">
                <div class="computer"></div>
                <div class="sao_top"></div>
                <div class="sao_img"></div>
                <div class="bot">
                    <a href="">点击下载蘑菇街APP</a>
                </div>
            </div>
            <div class="login"  >
                <div class="erweima"></div>
                <ul class="tab">
                    <li class="putong_login"><a href="javascript:;">普通登录</a></li>
                    <li class="phone_login"><a href="javascript:;">手机无密码登录</a></li>
                </ul>
                <div id="vuebox">
                    <div class="box_login" >
                        <div class="msg" >请输入。。。</div>
                        <form  id="myform">
                            <input type="text" placeholder="用户名/邮箱/手机号" name="account" v-model="account" class="normal"/>
                            <input type="password" placeholder="密码" name="password" v-model="password"  class="pass_lo"/>
                            <div class="sub_box"><input type="button" value="登录" @click="login()" class="sub"/>
                                <!--记住密码-->
                                <input type="checkbox" class="sub_box_check"/>记住密码
                            </div>
                        </form>
                        <div class="other_login">
                            <a href="javascript:;" class="qq">QQ登录</a>
                            <a href="javascript:;" class="weixin">微信登录</a>
                        </div>
                        <div id="forget"><a href="javascript:;">忘记密码</a></div>
                    </div>
                    <div id="phone_login">
                        <div class="msg">请输入。。。</div>
                        <form action="" id="my_form_phone">
                            <div class="tel_phone"><input type="text"  v-model="phone" placeholder="手机号码"/></div>
                            <div class="">
                                <a @click="sendCode()" class="active_code">动态获取验证码</a>
                                <input type="text" v-model="code" placeholder="动态密码" class="active_pass"/>
                            </div>
                            <div class=""><input type="button" value="登录" @click="loginByPhone()" class="_login"/></div>
                        </form>
                        <div class="other_login">
                            <a href="javascript:;" class="qq">QQ登录</a>
                            <a href="javascript:;" class="weixin">微信登录</a>
                        </div>

                        <div id="forget">
                            <a href="register.html" class="forr" style="width:70px;
									line-height: 20px;display: inline-block;">快速注册</a>
                            <a href="javascript:;">忘记密码</a>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</section>

<!--弹出框-->
<div class="djs">
    <div class="djs_title"><span class="djs_close">X</span></div>
    <p><span class="djs_s">6</span>秒后跳转首页~~~</p>

</div>

<!--怎么引footer?-->
<footer id="footer">
    <div class="wrap clear">
        <div class="footer_one">
            <div class="help_four">
                <h4>- 新手帮助 -</h4>
                <ul class="footer_leter">
                    <li><a href="">常见问题</a></li>
                    <li><a href="">自助服务</a></li>
                    <li><a href="">联系客服</a></li>
                    <li><a href="">意见反馈</a></li>
                </ul>
            </div>
            <div class="help_four">
                <h4>- 权益保障 -</h4>
                <ul class="footer_leter">
                    <li><a href="">全国包邮</a></li>
                    <li><a href="">7天无理由退货</a></li>
                    <li><a href="">退货运费补贴</a></li>
                    <li><a href="">限时发货</a></li>
                </ul>
            </div>
            <div class="help_four">
                <h4>- 支付方式 -</h4>
                <ul class="footer_leter">
                    <li><a href="">微信支付</a></li>
                    <li><a href="">支付宝</a></li>
                    <li><a href="">白富美支付</a></li>
                </ul>
            </div>
            <div class="help_four">
                <h4>- 移动客户端下载 -</h4>
                <ul class="footer_leter">
                    <li><a href="">蘑菇街</a></li>
                    <li><a href="">美丽说</a></li>
                    <li><a href="">uni引力</a></li>
                </ul>
            </div>
        </div>
        <div class="footer_two">
            <p>
                <a href="">美丽说</a><b>|</b>
                <a href="">蘑菇街游戏</a><b>|</b>
                <a href="">淘粉吧</a><b>|</b>
                <a href="">穿衣搭配</a><b>|</b>
                <a href="">秋季女装新款</a><b>|</b>
                <a href="">秋季连衣裙长袖</a><b>|</b>
                <a href="">秋季孕妇装</a><b>|</b>
                <a href="">QQ钱包</a><b>|</b>
                <a href="">时尚品牌网</a><b>|</b>
                <a href="">装修</a><b>|</b>
                <a href="">背带裤搭配</a><b>|</b>
                <a href="">衣联网</a><b>|</b>
                <a href="">播视网视频</a><b>|</b>
                <a href="">慧聪网</a><b>|</b>
                <a href="">衬衫搭配</a><b>|</b>
                <a href="">牛仔外套搭配图片</a><b>|</b>
                <a href="">冬装时尚搭配</a><b>|</b>
                <a href="">针织衫搭配</a><b>|</b>
                <a href="">牛仔衣搭配</a><b>|</b>
                <a href="">风衣搭配</a><b>|</b>
                <a href="">补水面膜排行榜</a><b>|</b>
                <a href="">爱蘑菇街</a><b>|</b>


            </p>
        </div>
        <div class="footer_three">
            <ul class="ours">
                <li><a href="">关于我们</a></li>
                <li><a href="">招聘信息</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">商家入驻</a></li>
                <li><a href="">商家后台</a></li>
                <li><a href="">蘑菇商学院</a></li>
                <li><a href="">商家社区</a></li>
                <li><a href="">规则中心</a></li>
                <li><a href="">有害信息举报</a></li>
            </ul>
            <p>©2017 Mogujie.com 杭州卷瓜网络有限公司</p>
        </div>
        <div class="footer_four">
            <p>
                <a href="">营业执照：913301065526808764</a>
                <b>|</b>
                <a href="">网络文化经营许可证：浙网文（2016）0349-219号</a>
                <b>|</b>
                <a href="">增值电信业务经营许可证：浙B2-20110349</a>
                <b>|</b>
                <a href="">安全责任书</a>
                <b>|</b>
                <a href="">浙公网安备 33010602002329号</a>
                <b>|</b>
            </p>
        </div>
    </div>
</footer>
<!--#include virtual="public.html"-->
</body>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script src="js/login.js" type="text/javascript"></script>
<!--<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>-->
<script>
	$(function () {
		$(".normal").focus(function () {
			$(".msg").text("请输入用户名");
		}).blur(function () {
			if ($('.normal').val()) {
			} else {
				$(".msg").text("用户名不能为空！");
				bstop1 = true;
			}
		});
	})
</script>
<script>
    var vm = new Vue({
        el: "#vuebox",
        data: {
            account:"",
            password:"",
            phone:"",
            code:"",
        },
        methods: {
            login: function () {
                axios.get("http://localhost/user/manager/do/login", {
                    params: {
                        account: this.account,
                        password: this.password
                    }
                }).then(res => {
                       if (res.data.result=="SUCCESS"){
                           $(".msg").text("登录成功");
                           sessionStorage.setItem("realname",res.data.data.account)
                           sessionStorage.setItem("loginid",res.data.data.id)
                           window.location.href="index.html"
                       }else{
                           $(".msg").text(res.data.message);
                       }
                    }
                )
            },
            loginByPhone: function () {
                axios.get("http://localhost/user/manager/checkCodeByPhone", {
                    params: {
                        phone: this.phone,
                        code: this.code
                    }
                }).then(res => {
                        if (res.data.result == "SUCCESS") {
                            alert("成功")
                            axios.get("http://localhost/user/manager/do/loginByPhone", {
                                params: {
                                    phone: this.phone
                                }
                            }).then(res => {
                                    if (res.data.result=="SUCCESS"){
                                        $(".msg").text("登录成功");
                                        sessionStorage.setItem("realname",res.data.data.account)
                                        sessionStorage.setItem("loginid",res.data.data.id)
                                        window.location.href="index.html"
                                    }else{

                                        $(".msg").text(res.data.message);
                                    }
                                }
                            )
                        } else {
                            alert(res.data.message)
                        }
                    }
                )

            },
            sendCode: function () {
                axios.get("http://localhost/user/manager/send/code", {
                    params: {
                        phone: this.phone
                    }
                }).then(res => {
                        if (res.data.result == "SUCCESS") {
                            alert("发送成功")
                        }
                    }
                )
            },
        },
        mounted() {
        }
    })
</script>
</html>
